<template>
	<view style="height:100vh;">
		<layout style="width:100%;height:100%;background-color: #bde2e4 !important;">
			<a-spin :spinning="spinning" style="width:100%;" />
			<view class="card-container" v-for="item in dataList" :key="item.id">
				<view class="custom-card">
					<view class="card-header">
						<el-tag :type="getTagType(item.auditStatus)"
							class="tag-style">{{ item.auditStatusText }}</el-tag>
					</view>
					<view class="card-body">
						<p><strong>ID:</strong> {{ item.id }}</p>
						<p><strong>流水号:</strong> {{ item.serialNo }}</p>
						<p><strong>审核人:</strong> {{ item.auditUser }}</p>
						<p><strong>审核时间:</strong> {{ item.auditTime }}</p>
					</view>
				</view>
			</view>
		</layout>

	</view>

</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		listReplenishApply
	} from "@/api/wmsApply/replenishApply";
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	const dataList = ref([]);
	const spinning = ref(true)
	const getTagType = (status) => {
		switch (status) {
			case 1:
				return "warning";
			case 2:
				return "success";
			case 3:
				return "danger";
			default:
				return "info";
		}
	};
	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {

			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {

			return null;
		}
	}
	async function getList1() {
		try {
			const ref = await listReplenishApply({
				pageNum: 1,
				pageSize: 200,
				applyStatus: 1
			});
			console.log(ref)

			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const user = await getQuery("query_user", item.applyUser);
				const applyStatus = await getDictVaule("apply_status", item.applyStatus);

				let a = {
					id: item.id,
					serialNo: item.serialNo,
					auditStatus: 3,
					auditStatusText: applyStatus,
					auditUser: user,
					auditTime: item.applyTime
				};

				d.push(a);
			}
			console.log(d);
			dataList.value = d;
			spinning.value = false;
		} catch (error) {

		}
	}
	getList1();
</script>

<style scoped>
	/* 全局容器 */
	.card-container {
		padding: 16rpx 24rpx;
		animation: slideUp 0.4s ease-out forwards;
		opacity: 0;
	}
	
	/* 为不同卡片添加延迟动画 */
	.card-container:nth-child(1) { animation-delay: 0.1s; }
	.card-container:nth-child(2) { animation-delay: 0.2s; }
	.card-container:nth-child(3) { animation-delay: 0.3s; }
	.card-container:nth-child(4) { animation-delay: 0.4s; }
	.card-container:nth-child(5) { animation-delay: 0.5s; }
	
	@keyframes slideUp {
		from { opacity: 0; transform: translateY(20rpx); }
		to { opacity: 1; transform: translateY(0); }
	}
	
	/* 卡片样式 */
	.custom-card {
		width: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		background: linear-gradient(145deg, #ffffff, #f9fafb);
		border: 1px solid rgba(230, 230, 230, 0.8);
		transition: all 0.3s ease;
	}
	
	.custom-card:active {
		transform: scale(0.98);
	}
	
	/* 卡片头部 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		background: linear-gradient(90deg, rgba(39, 174, 96, 0.1), rgba(46, 204, 113, 0.05));
		border-bottom: 1px solid rgba(39, 174, 96, 0.1);
	}
	
	/* 状态标签 */
	:deep(.el-tag) {
		border-radius: 30rpx !important;
		padding: 2rpx 20rpx !important;
		font-size: 24rpx !important;
		font-weight: 500 !important;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	:deep(.el-tag--warning) {
		background-color: #ffd166 !important;
		border-color: #ffd166 !important;
		color: #664d00 !important;
	}
	
	:deep(.el-tag--success) {
		background-color: #2ecc71 !important;
		border-color: #2ecc71 !important;
		color: #ffffff !important;
	}
	
	:deep(.el-tag--danger) {
		background-color: #e74c3c !important;
		border-color: #e74c3c !important;
		color: #ffffff !important;
	}
	
	:deep(.el-tag--info) {
		background-color: #3498db !important;
		border-color: #3498db !important;
		color: #ffffff !important;
	}
	
	/* 卡片内容 */
	.card-body {
		padding: 24rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
	}
	
	/* 信息项 */
	.card-body p {
		margin: 8rpx 0;
		font-size: 28rpx;
		color: #4a6572;
		position: relative;
		padding-left: 10rpx;
	}
	
	.card-body p:nth-child(1),
	.card-body p:nth-child(2) {
		grid-column: span 2;
	}
	
	.card-body p::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4rpx;
		height: 24rpx;
		background-color: #27ae60;
		border-radius: 2rpx;
	}
	
	.card-body p strong {
		color: #2c3e50;
		font-weight: 600;
		margin-right: 10rpx;
	}
	
	/* 响应式设计 */
	@media (max-width: 768px) {
		.card-body {
			grid-template-columns: 1fr;
		}
		
		.card-body p:nth-child(1),
		.card-body p:nth-child(2) {
			grid-column: span 1;
		}
	}
</style>